<template>
	<view style="margin-top: -20rpx;" >
		<view style="background-color: #ffffff;">
		<view class="money-book">
			<!-- 两边传参不一样 -->
			<image :src="image"></image>
			<view>
				<view>{{exam_name}}</view>
				<view>{{type_text}}</view>
				<view>￥<text style="font-size:32rpx;font-weight: 700;">{{price}}</text>.00</view>
			</view>
		</view>
		<view style="background-color: #efefef;height: 20rpx;"></view>
		<view class="money-title">支付方式</view>
		<view class="uni-list">
			<radio-group class="money-radio-group" >
				<label class="money-label" >
					<view>
						<image src="../../../static/img/pay1.jpg"></image>
						<text>微信支付</text>
						
					</view>
					<view>
						<radio :checked="ckeckedwx" @click="wx()" />
					</view>
					
				</label>
				<label class="money-label" >
					<view>
						<image src="../../../static/img/jieshuo.png"></image>
						<text>激活码激活</text>
						<input @input="onInput" placeholder="请输入激活码..."/>
					</view>
					<view>
						<radio :checked="ckeckedzf" @click="zf()"  />
					</view>
					
				</label>
			</radio-group>
		</view>
		<view  class="rule-btn" >
			<view  :class="(ckeckedzf===false&&ckeckedwx===false)? 'nodisabled' : 'disabled' "  @tap="submitCode()" >
				{{text}}
			</view>
		</view>	
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type_text:'',
				id:'',
				image:'',
				price:'',
				exam_name:'',
				current:0,
				value:'',
				setCode:'',
				ckeckedzf:true,
				ckeckedwx:false,
				text:'立即激活',
				nodisabled:'nodisabled',
				disabled:'disabled',
			}
		},
		onLoad(opts){
			//console.log(JSON.stringify(opts)+"opts")
			this.type_text=opts.type_text
			this.id=opts.id
			this.image=opts.image
			this.price=opts.price
			this.exam_name=opts.exam_name
			
			
			
			
			
			
			
		},
		methods: {
			
			onInput(e) {
						   
						   this.setCode=e.detail.value
			},
			getCode() {
			  if(this.$myUserLogin.getToken()){ 
							 //this.showModal=!0
							 uni.navigateTo({
							 	url:'/pagesa/my/activation/activation'
							 })
			  }else{
			    Error.errorNotLoggedIn();
			  }
			},
			async submitCode(){
				if(this.text=='立即激活'){
					
					let res = await this.$myHttp.post({
						url: this.$myHttp.urlMap.doSetCode,
						data: {
							setCode:this.setCode,  
						},
						needLogin: true
					});
					
					if (res.code === 1) {
							this.showModal=!1
						uni.showToast({
							title: res.data.message,
							icon:'none',
							duration:3000
						})
					}
				}else if(this.text=='立即支付'){
					console.log("立即支付")
				}
				
			},
			wx(){
				this.ckeckedwx=true
				this.ckeckedzf=false
				this.text="立即支付"
			},
			zf(){
				this.ckeckedwx=false
				this.ckeckedzf=true
				this.text="立即激活"
				
			},
				 
		}
	}
</script>

<style>
	page{
		background-color:#efefef;
	}
.money-book{
	display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    /* justify-content: space-around; */
	    width: 92%;
	    border-radius: 20rpx 20rpx 0 0;
	    margin: 20rpx auto;
		background-color: #ffffff;
		padding-top: 50rpx;
}
.money-book>image{
	    width: 130rpx;
	    height: 180rpx;
	    border-radius: 10rpx;
	
}
.money-book>view{
	display: flex;
	    flex-flow: column wrap;
	    height: 160rpx;
		margin-left: 15rpx;
	
}
.money-book>view>view:nth-child(1){
	margin-top: 10rpx;
	    font-weight: 700;
	    font-size: 28rpx;
}
.money-book>view>view:nth-child(2){
	margin-top: 10rpx;
	    border-radius: 50rpx;
	    background-color: #efefef;
	    color: #9c9c9c;
	    padding: 5rpx;
	    font-size: 20rpx;
	    text-align: center;
	    width: 100rpx;
	    height: 30rpx;
}
.money-book>view>view:nth-child(3){
	margin-top: 15rpx;
	    color: red;
	    font-size: 20rpx;
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: flex-end;
}
.money-title{
	background-color: #ffffff;
	font-size:30rpx ;
	margin: 30rpx 15rpx ;
	font-weight: 700;
	
}
.money-radio-group{
	width: 95%;
	background-color: #ffffff;
}
.money-label{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row nowrap;
	border-bottom: 1px #efefef solid;
	font-size: 23rpx;
	margin: 10rpx auto;
	height: 40px;
}
.money-label>view:nth-child(1){
	display: flex;
	align-items: center;
}
.money-label image{
	width: 45rpx;
	height: 45rpx;
	margin: 15rpx;
}
.money-label input{
	margin-left: 25rpx;
}
.rule-btn{  
	width: 100%;
	    border-top: 1rpx #efefef solid;
	    position: fixed;
	    bottom: 0;
	    height: 110rpx;
	   background-color: #ffffff;
	    display: flex;
	    justify-content: center;
	    align-items: center;
}

.nodisabled{
	border-radius: 50rpx;
	    width: 95%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin: 10rpx auto;
	    auto: ;
	    position: fixed;
	    bottom: 0;
	    color: #ffffff;
	    font-size: 30rpx;
	    margin: 10rpx auto;
	    margin: 10rpx auto;
	    height: 90rpx;
	    font-size: 30rpx;
	pointer-events: none;
	background-color:#81c2ff;
}
.disabled{
	border-radius: 50rpx;
	    width: 95%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin: 10rpx auto;
	    auto: ;
	    position: fixed;
	    bottom: 0;
	    color: #ffffff;
	    font-size: 30rpx;
	    margin: 10rpx auto;
	    margin: 10rpx auto;
	    height: 90rpx;
	    font-size: 30rpx;
	background-color: #38a7f9;
}
</style>
